<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车事例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th>分类序号/全选
                            <input @click="selectAll" type='checkbox' v-model='checked'>
                        </th>
                        <th>商品分类</th>
                        <th>商品序号/全选
                            <input @click="selectAll" type='checkbox' v-model='checked'>
                        </th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(items,indexs) in list ">
                        <tr v-for="(item,index) in items.conter">
                            <td>{{items.id }}<input type="checkbox" v-model='arr' :value="item.id" @click="selectListAll"></td></td>
                            <td>{{items.name}}</td>
                            <td>{{ item.id }}<input type="checkbox" v-model='arr' :value="item.id" @click="fn2"></td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.price }}</td>
                            <td>
                                <button @click="handleReduce(indexs,index)" :disabled="item.count === 1">-</button>
                                {{item.count}}
                                <button @click="handleAdd(indexs,index)">+</button>
                            </td>
                            <td>
                                <button @click="handleRemove(indexs,index)">移除</button>
                            </td>
                        </tr>
                    </template>

                    <!-- <tr v-for='(item, index) in data'>
                        <template v-for='items in item'>
                         <template v-for='(itemss, indexs) in items' v-if='indexs !== "type"'>
                          <td>{{itemss}}</td>
                         </template>
                        </template>
                       </tr> -->
                    <!-- <tr v-for="(item,index) in conters">
                        
                        <td>{{ index +1 }}<input type="checkbox" v-model='arr' :value="item.id" @click="fn2()"></td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
                            {{item.count}}
                            <button @click="handleAdd(index)">+</button>
                        </td>
                        <td>
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                    </tr> -->
                </tbody>
            </table>
            <div>总价：￥{{totalPrice}}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>